<template>
  <div id="app">
    <Menu class="menu"></Menu>
    <div id="main">
      <div id="left">
        <div id="draw">
          <ToolBar class="toolbar"></ToolBar>
          <div id="grid"></div>
          <div id="map"></div>
        </div>
      </div>
      <div id="right">
        <DataTree class="data-tree" v-show="DataTreeVisible"></DataTree>
        <Attribute
          class="model-attribute"
          v-show="AttributeVisible"
        ></Attribute>
      </div>
    </div>
  </div>
</template>

<script>
import "@antv/x6-vue-shape";
import Menu from "./components/Menu";
import DataTree from "@/components/DataTree";
import Attribute from "@/components/Attribute";
// 实例化FlowGraph
import ToolBar from "@/components/ToolBar";
import eventBus from "@/EventBus.js";

export default {
  name: "App",
  mounted() {
    document.onkeydown = (e) => {
      if(e.ctrlKey == true) e.preventDefault();
    };
    // 页面重新加载时，获取localStorage中已保存的数据
    const localData = localStorage.getItem("localData");
    localData && eventBus.$emit("fileIn", JSON.parse(localData));
    eventBus.$emit('Tree:update')

    // 页面离开前，将数据存储到localStorage
    window.onbeforeunload = function () {
      eventBus.$emit("saveToLocal");
      return "关闭提示";
    };

  },
  components: {
    ToolBar,
    Attribute,
    DataTree,
    Menu,
  },
  data() {
    return {
      DataTreeVisible: true,
      AttributeVisible: true
    };
  },
  methods: {},
};
</script>

<style>
html,
body {
  margin: 0;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.menu {
  flex: 0 1 80px;
}
#main {
  flex: 1 1 auto;
  display: flex;
}
#left {
  flex: 1 1 85%;
  display: flex;
  flex-direction: column;
}
#draw {
  flex: 1 1 80%;
  display: flex;
  position: relative;
}
.toolbar {
  flex: 1 1 10%;
  border-right: 2px solid #cecece;
  max-width: 150px;
  min-width: 100px;
}
#grid {
  flex: 1 1 90%;
}
#map {
  position: absolute;
  /* width: 100px;
  height: 100px; */
  right: 0;
  bottom: 0;
}
#right {
  flex: 0 1 350px;
  display: flex;
  flex-direction: column;
}
.data-tree {
  flex: 1 1 50%;
  border-left: 2px solid #cecece;
  border-bottom: 1px solid #cecece;
  max-height: 50%;
  overflow-y: auto;
}
.model-attribute {
  flex: 1 1 50%;
  border-left: 2px solid #cecece;
}
#grid {
  height: 100%;
  width: 100%;
}
</style>
